<template>
  <div class="padding">
    <el-card>
      <el-row :gutter="24" class="mb8">
        <el-col :span="8">
          <span class="exam_span">试卷状态：</span>
          <el-select
            v-model="queryParams.paperStatus"
            placeholder="请选择"
            @change="changePaperStatus"
          >
            <el-option
              v-for="dict in dict.type.paper_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="8" :offset="4">
          <div class="search">
            <el-input
              v-model="queryParams.paperName"
              placeholder="搜索课程"
              prefix-icon="el-icon-search"
            >
              <el-button type="primary" slot="append" icon="el-icon-search" @click="searchExam"></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-refresh" @click="reflash"></el-button>
        </el-col>
      </el-row>
      <el-table :data="paperList" style="margin-top:20px">
        <el-table-column
          label="试卷名称"
          align="center"
          prop="paperName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="描述" align="center" prop="paperDesc" :show-overflow-tooltip="true" />
        <el-table-column label="总分" align="center" prop="paperNowScore">
          <template slot-scope="scope">
            <span>{{scope.row.paperNowScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="合格分数" align="center" prop="paperPassScore">
          <template slot-scope="scope">
            <span>{{scope.row.paperPassScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试时长" align="center" prop="paperDuration">
          <template slot-scope="scope">
            <span>{{scope.row.paperDuration}}分钟</span>
          </template>
        </el-table-column>
        <el-table-column
          label="开考时间"
          align="center"
          prop="paperStartTime"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paperStartTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="结束时间"
          align="center"
          prop="paperEndTime"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paperEndTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="试卷状态" align="center" prop="paperStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.paper_status" :value="scope.row.paperStatus" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.paperStatus==1"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleBegin(scope.row.paperId)"
            >开始考试</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllPaperList, toExam } from "@/api/exam";
export default {
  name: "exam",
  dicts: ["paper_status"],
  data() {
    return {
      paperList: [],
      queryParams: {
        pageSize: 1,
        pageNum: 8,
        paperName: null,
        paperStatus: null
      }
    };
  },
  created() {
    this.getPaperList();
  },
  methods: {
    getPaperList() {
      getAllPaperList(this.queryParams).then(res => {
        if (res.code == 200) {
          this.paperList = res.data;
        }
      });
    },
    changePaperStatus() {
      this.getPaperList();
    },
    searchExam() {
      if (
        this.queryParams.paperName !== null &&
        this.queryParams.paperName !== ""
      ) {
        this.getPaperList();
      }
    },
    reflash() {
      this.queryParams.paperStatus = null;
      this.queryParams.paperName = null;
      this.getPaperList();
    },
    // 开始考试
    handleBegin(paperId) {
      this.$confirm("是否确定进入考试？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          toExam({ paperId: paperId }).then(res => {});
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped>
.padding {
  padding: 0 10%;
}
.el-card {
  min-height: 600px;
}
.exam_span {
  font-size: 16px;
  color: #909399;
  line-height: 40px;
  margin-left: 30px;
}

.search {
  display: block;
  float: right;
  padding-right: 30px;
  margin-right: 15px;
  color: white;
}

.search .el-button {
  background-color: #409eff;
  border-radius: 0 4px 4px 0;
  border: 1px solid #409eff;
  color: white;
  font-size: 14px;
}

.search .el-button:hover {
  transform: scale(1.05);
  transition: all 0.2s;
}
</style>
